<template>
    <div>
        <p class="header">固井预测</p>
        <!-- 固井预测 -->
        <div style="margin-bottom: 20px"></div>

        <el-form
            :model="searchModel"
            label-position="top"
            label-width="180px"
            style="margin-left: 10px"
            v-loading="loading"
            element-loading-text="预测中"
        >
            <el-col :span="6">
                <el-form-item label="套管尺寸(mm)">
                    <template>
                        <el-select v-model="searchModel.caseSize" clearable placeholder="请选择套管尺寸" style="width: 70%">
                            <el-option v-for="item in CaseSizeOptions" :key="item" :label="item" :value="item" :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="井眼扩大率">
                    <el-input placeholder="请填写井眼扩大率" v-model="searchModel.boreholeExpansionRate" style="width: 70%" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="复杂情况">
                    <el-input placeholder="请填写复杂情况" v-model="searchModel.complicatedConditions" style="width: 70%" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="气层总厚度">
                    <el-input placeholder="请填写气层总厚度" v-model="searchModel.totalGasThickness" style="width: 70%" />
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="抗压强度">
                    <el-input placeholder="请填写抗压强度" v-model="searchModel.compressiveStrength" style="width: 70%" />
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="SPNx">
                    <el-input placeholder="请填写SPNx" v-model="searchModel.sixData" style="width: 70%" />
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="套管数量">
                    <el-input placeholder="套管数量" v-model="searchModel.caseNum" style="width: 70%" />
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="钻井液密度(g/cm^3)">
                    <el-input placeholder="请填写钻井液密度" v-model="searchModel.fluidDensity" style="width: 70%" />
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="钻井液粘度(mPa.s)">
                    <el-input placeholder="请填写钻井液粘度" v-model="searchModel.fluidViscosity" style="width: 70%" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="钻井液失水(ml)">
                    <el-input placeholder="请填写钻井液失水" v-model="searchModel.fluidWaterLoss" style="width: 70%" />
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="钻井液初切力(Pa)">
                    <el-input placeholder="请填写钻井液初切力" v-model="searchModel.fluidInitShearForce" style="width: 70%" />
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="钻井液终切力(Pa)">
                    <el-input placeholder="请填写钻井液终切力" v-model="searchModel.fluidUltimateShear" style="width: 70%" maxlength="20" />
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="钻井液PH值">
                    <el-input placeholder="请填写钻井液PH值" v-model="searchModel.fluidPhValue" style="width: 70%" maxlength="20" />
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="水泥浆密度(g/cm^3)">
                    <el-input placeholder="请填写水泥浆密度" v-model="searchModel.cementSlurryDensity" style="width: 70%" maxlength="20" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="水泥浆返深(m)">
                    <el-input
                        placeholder="请填写水泥浆返深"
                        v-model="searchModel.cementSlurryReturnDepth"
                        style="width: 70%"
                        maxlength="20"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="扶正器数量">
                    <el-input placeholder="请填写扶正器数量" v-model="searchModel.centralizersNum" style="width: 70%" maxlength="20" />
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="稠化时间(min)">
                    <el-input placeholder="请填写稠化时间" v-model="searchModel.thickeningTime" style="width: 70%" maxlength="20" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="施工时间(min)">
                    <el-input placeholder="请填写施工时间" v-model="searchModel.constructionTime" style="width: 70%" maxlength="20" />
                </el-form-item>
            </el-col>

            <el-col :span="6" style="margin-top: 40px">
                <el-form-item>
                    <el-button type="primary" @click="predict">预测</el-button>
                </el-form-item>
            </el-col>
            <el-col :span="6" style="padding-top: 25px">
                <span style="font-size: 20px; margin-top: 35px；">固井合格率:&nbsp;&nbsp;</span>
                <span style="font-size: 40px; color: green; margin-top: 65px">{{ score }}%</span>
            </el-col>
        </el-form>
    </div>
</template>

<script>
import { CellPredict } from '../../../api/module/dataClassification/excel';
import { ListDataDictByCondition } from '../../../api/module/dataClassification/data_classification';
import { Loading } from 'element-ui';
export default {
    data() {
        return {
            score: null,
            CaseSizeOptions: [], // 套管尺寸下拉
            loading: false,
            searchModel: {
                caseSize: 177.8,
                boreholeExpansionRate: 0.0,
                complicatedConditions: 0.0,
                totalGasThickness: 0.0,
                compressiveStrength: 14.0,
                sixData: 0.0,
                caseNum: 243.0,
                fluidDensity: 1.6,
                fluidViscosity: 65.0,
                fluidWaterLoss: 1.8,
                fluidInitShearForce: 2.0,
                fluidUltimateShear: 10.0,
                fluidPhValue: 10.0,
                cementSlurryDensity: 1.93,
                cementSlurryReturnDepth: 10.0,
                centralizersNum: 52.0,
                thickeningTime: 240.0,
                constructionTime: 39.0
            }
        };
    },
    created() {
        //获取下拉框数据字典
        this.ListDataDictByCondition();
        this.predict();
    },
    methods: {
        //下拉函数
        ListDataDictByCondition() {
            ListDataDictByCondition('套管尺寸').then((res) => {
                this.CaseSizeOptions = res.data;
                // console.log("套管尺寸" + this.CaseSizeOptions)
            });
        },
        predict() {
            // let loadingInstance = Loading.service(options);
            this.loading = true;
            CellPredict(this.searchModel)
                .then((res) => {
                    console.log('预测接口调用成功');
                    console.log(res);
                    //预测结果保留2位
                    this.score = res.data.score.toFixed(2);
                    this.loading = false;
                    //loadingInstance.close();
                })
                .catch((err) => {
                    console.log('预测接口调用失败');
                });
        }
    }
};
</script>

<style scoped="scoped">

.header {
   
    color:black;
    margin-bottom: 10px;
    text-align:left;
    font-size: 17px;
    background-color: #eef0f6;
    font-weight: 400;
    letter-spacing: 0px;
    height: 27px;
    padding: 5px 10px;
}

</style>
